<template>
	<view class="home">
		<view class="home-header">
			<view class="time">{{duration}}</view>
			<view class="title">喜欢花 喜欢浪漫 喜欢你 ~ </view>
		</view>
		<view class="banner">
			<view class="card">
				<view class="left">
					<image src="https://q1.qlogo.cn/g?b=qq&nk=923840997&s=640" class="leftimg"></image>
					<view class="lefttitle">小孙</view>
				</view>
				<view class="conter">
					<div class="love-icon">
						<ul>
							<li v-for="index in 9" :key="index"></li>
						</ul>
					</div>
				</view>
				<view class="right">
					<image src="https://q1.qlogo.cn/g?b=qq&nk=2714130704&s=640" class="rightimg"></image>
					<view class="righttitle">冰冰</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 情侣日记 -->
			<view class="moments">
				<view class="head">
					<image class="icon" src="../../static/icons/a-045_shuben.png"></image>
					<view class="title">情侣日记<view class="updatetime">更新于2024年5月5日</view>
					</view>
				</view>
				<view class="diary">
					<view class="diary-head">
						<view class="left">
							<view class="h1">今日小记——旅游</view>
							<view class="h2">记录者：孙栋梁</view>
						</view>
						<view class="right">
							<image src="https://q1.qlogo.cn/g?b=qq&nk=923840997&s=640" class="rightimg"></image>
						</view>
					</view>
					<view class="diary-content">
						今天，我和女朋友一起踏上了我们期待已久的旅行。清晨的阳光透过窗户洒在我们脸上，为我们这次的旅行增添了几分温暖和期待。我们早早地出发，一路上欣赏着沿途的风景，聊着对...
					</view>
					<view class="diary-footer">
						<view class="left">
							<view>2024年5月5日 12:30</view>
						</view>
						<view class="right">
							<view class="button">查看更多</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 精选瞬间 -->
			<view class="moments">
				<view class="head">
					<image class="icon" src="../../static/icons/a-045_zhaopian.png"></image>
					<view class="title">精选瞬间</view>
				</view>
				<view class="contentlist">
					<view class="nav" v-for="index in 10" :key="index">
						<image class="nav-img"
							src="https://www.cvun.net/wp-content/uploads/2024/04/20240410143225263-8c2594fcb53c3b4a40870878e7244b2-scaled.jpg">
						</image>
						<view>南阳</view>
						<view class="nav-h1">夏天的第一杯奶茶</view>
						<view class="nav-h2">2024-5-5</view>
					</view>
				</view>
			</view>
			
			<!-- 共同完成 -->
			<view class="together">
				<view class="head">
					<image class="icon" src="../../static/icons/a-045_gengduo.png"></image>
					<view class="title">共同完成</view>
				</view>
				<view class="conter">
					<view class="left">
						<view class="h1">一起养只猫</view>
					</view>
					<view class="right">
						<image src="https://q1.qlogo.cn/g?b=qq&nk=923840997&s=640" class="rightimg"></image>
					</view>
				</view>
				<view class="footer">备注：什么都可以。但是不要傻猫。</view>
				<view class="time">2024年5月5日</view>
				<view class="button">查看详情</view>
			</view>
			<!-- 留言板 -->
			<view class="board">
				<view class="head">
					<image class="icon" src="../../static/icons/a-045_xinxi.png"></image>
					<view class="title">留言板</view>
				</view>
				<view class="conter">
					<view class="left">
						<view class="h1">大姐姐</view>
					</view>
					<view class="right">
						<image src="https://q1.qlogo.cn/g?b=qq&nk=923840997&s=640" class="rightimg"></image>
					</view>
				</view>
				<view class="footer">愿山河漫漫，你们仍能携手前行！</view>
				<view class="time">2024年5月5日</view>
				<view class="button">查看详情</view>
			</view>
			<!-- 底部安全区域 -->
			<view class="safearea">其余模块开发中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startDate: new Date('2024-03-27T20:21:00'), // 替换为你的起始日期  
				duration: ''
			};
		},
		onLoad() {
			this.calculateDuration()
		},
		methods: {
			calculateDuration() {
				setInterval(() => {
					 let currentTime = new Date();
					let diff = currentTime - this.startDate;
					let days = Math.floor(diff / (1000 * 60 * 60 * 24));
					diff -= days * (1000 * 60 * 60 * 24);
					let hours = Math.floor(diff / (1000 * 60 * 60));
					diff -= hours * (1000 * 60 * 60);
					let minutes = Math.floor(diff / (1000 * 60));
					diff -= minutes * (1000 * 60);
					let seconds = Math.floor(diff / 1000);
					this.duration = `我们在一起${days}天${hours}时${minutes}分${seconds}秒了`;
					console.log(this.startDate);  
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f4f6;
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.home {
		width: 100vw;
		height: 100vh;
		background: url('https://www.cvun.net/bg.jpg');
		background-size: 120%;
		background-repeat: no-repeat;

		.love-tabbar {
			width: 50vw;
			height: 50px;
			background: #ffffff1f;
			backdrop-filter: blur(3px);
			border-radius: 50px;
			position: fixed;
			bottom: 15px;
			left: 25vw;
			display: flex;
			justify-content: space-evenly;
			box-shadow: 0 0 20px 0px #00000014;

			.love-tabbar-item {
				.love-tabbar-item-nav {
					.love-tabbar-item-icon {
						width: 30px;
						height: 30px;
						border-radius: 50px;
						margin: 10px auto;
					}

					.select {
						animation: grow 1s ease-in-out forwards infinite;
					}
				}
			}
		}

		.home-header {
			z-index: 1;
			position: fixed;
			width: 100vw;
			height: 95px;
			left: 0;
			top: 0px;
			background: #ffffff00;
			color: #ffffff;

			.time {
				font-size: 20px;
				padding: 0 10px;
				font-weight: 900;
				margin: 50px 0 0 0;
			}

			.title {
				font-size: 10px;
				padding: 0 10px;
			}
		}

		.banner {
			z-index: 0;
			height: 30vh;
			width: 100vw;
			display: inline-block;

			.card {
				width: 95vw;
				height: 150px;
				background: #ffffff1f;
				backdrop-filter: blur(3px);
				margin: 105px auto 0;
				border-radius: 16px;
				box-shadow: 0 0 20px 0px #0000002b;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.left {
					width: 33%;

					.leftimg {
						width: 70px;
						height: 70px;
						border-radius: 10px;
						margin: 30px auto 10px;
						display: block;
						border: 2px solid #fff;
					}

					.lefttitle {
						text-align: center;
						color: #fff;
						font-weight: 900;
					}
				}

				.conter {
					width: 33%;

					.love-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 70px 0 0 0;

						ul {
							height: 50px;
							list-style: none;
							padding: 0;

							li {
								float: left;
								width: 5px;
								height: 5px;
								border-radius: 20px;
								margin-right: 3px;
							}

							li:nth-child(1) {
								background-color: #f62e74;
								animation: love1 4s infinite;
							}

							li:nth-child(2) {
								background-color: #f45330;
								animation: love2 4s infinite;
								animation-delay: 0.15s;
							}

							li:nth-child(3) {
								background-color: #ffc883;
								animation: love3 4s infinite;
								animation-delay: 0.3s;
							}

							li:nth-child(4) {
								background-color: #30d268;
								animation: love4 4s infinite;
								animation-delay: 0.45s;
							}

							li:nth-child(5) {
								background-color: #006cb4;
								animation: love5 4s infinite;
								animation-delay: 0.6s;
							}

							li:nth-child(6) {
								background-color: #784697;
								animation: love4 4s infinite;
								animation-delay: 0.75s;
							}

							li:nth-child(7) {
								background-color: #ffc883;
								animation: love3 4s infinite;
								animation-delay: 0.9s;
							}

							li:nth-child(8) {
								background-color: #f45330;
								animation: love2 4s infinite;
								animation-delay: 1.05s;
							}

							li:nth-child(9) {
								background-color: #f62e74;
								animation: love1 4s infinite;
								animation-delay: 1.2s;
							}
						}

						@keyframes love1 {

							30%,
							50% {
								height: 15px;
								transform: translateY(-7.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love2 {

							30%,
							50% {
								height: 32px;
								transform: translateY(-17.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}

						}

						@keyframes love3 {

							30%,
							50% {
								height: 46px;
								transform: translateY(-23px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love4 {

							30%,
							50% {
								height: 50px;
								transform: translateY(-18.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love5 {

							30%,
							50% {
								height: 50px;
								transform: translateY(-14.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}
					}
				}

				.right {
					width: 33%;

					.rightimg {
						width: 70px;
						height: 70px;
						border-radius: 10px;
						margin: 30px auto 10px;
						display: block;
						border: 2px solid #fff;
					}

					.righttitle {
						text-align: center;
						color: #fff;
						font-weight: 900;
					}
				}
			}
		}

		.content {
			width: 95vw;
			height: 70vh;
			z-index: 0;
			margin: 10px auto;
			overflow: auto;

			.moments {
				padding: 15px;
				background: linear-gradient(129deg, #fe3f6a14, #ffffff87);
				backdrop-filter: blur(3px);
				border-radius: 16px;
				margin: 10px 0;

				.head {
					.icon {
						width: 30px;
						height: 30px;
						display: block;
						float: left;
					}

					.title {
						font-size: 14px;
						color: #fff;
						line-height: 30px;
						font-weight: 900;
						text-indent: 5px;
						width: 100%;
						height: 30px;
						margin-bottom: 15px;

						.updatetime {
							float: right;
							line-height: 30px;
							color: #e3e3e3;
							font-size: 12px;
							font-weight: 0;
						}
					}

				}

				.contentlist {
					display: flex;
					overflow: auto;

					.nav {
						width: 120px;
						margin-right: 10px;

						.nav-img {
							width: 120px;
							height: 170px;
							border-radius: 6px;
						}

						.nav-h1 {
							font-size: 12px;
							color: #ffffff;
						}

						.nav-h2 {
							font-size: 10px;
							color: #e3e3e3;
						}
					}
				}

				.diary {
					.diary-head {
						height: 40px;

						.left {
							float: left;

							.h1 {
								font-size: 18px;
								font-weight: 900;
								color: #ffffff;
							}

							.h2 {
								font-size: 12px;
								font-weight: 900;
								color: #e3e3e3;
							}
						}

						.right {
							float: right;

							.rightimg {
								width: 40px;
								height: 40px;
								border-radius: 50px;
							}
						}
					}

					.diary-content {
						color: #fff;
						font-size: 12px;
						text-indent: 20px;
						margin: 10px 0;
					}

					.diary-footer {
						height: 30px;
						line-height: 30px;
						font-size: 12px;

						.left {
							float: left;
							color: #e3e3e3;
						}

						.right {
							float: right;

							.button {
								background: #fed610b0;
								color: #fff;
								border-radius: 15px;
								padding: 0 15px;
							}
						}
					}
				}
			}

			.together {
				width: 40%;
				height: 190px;
				padding: 15px;
				background: linear-gradient(129deg, #fe3f6a14, #ffffff87);
				backdrop-filter: blur(3px);
				border-radius: 16px;
				float: left;

				.head {
					.icon {
						width: 30px;
						height: 30px;
						display: block;
						float: left;
					}

					.title {
						font-size: 14px;
						color: #fff;
						line-height: 30px;
						font-weight: 900;
						text-indent: 5px;
						width: 100%;
						height: 30px;
						margin-bottom: 15px;
					}

				}

				.conter {
					line-height: 30px;
					width: 100%;
					height: 30px;

					.left {
						float: left;

						.h1 {
							font-size: 18px;
							font-weight: 900;
							color: #ffffff;
						}
					}

					.right {
						float: right;

						.rightimg {
							width: 30px;
							height: 30px;
							border-radius: 50px;
						}
					}
				}

				.time {
					color: #e3e3e3;
					font-size: 10px;
					text-align: left;
					margin: 5px 0 0 0;
				}

				.footer {
					font-size: 14px;
					color: #fff;
					width: 100%;
					display: inline-block;
				}

				.button {
					color: #fff;
					background: #0f6bff9e;
					font-size: 12px;
					padding: 0 15px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border-radius: 30px;
					margin: 10px 0;
				}
			}

			.board {
				width: 40%;
				height: 190px;
				padding: 15px;
				background: linear-gradient(129deg, #fe3f6a14, #ffffff87);
				backdrop-filter: blur(3px);
				border-radius: 16px;
				float: right;

				.head {
					.icon {
						width: 30px;
						height: 30px;
						display: block;
						float: left;
					}

					.title {
						font-size: 14px;
						color: #fff;
						line-height: 30px;
						font-weight: 900;
						text-indent: 5px;
						width: 100%;
						height: 30px;
						margin-bottom: 15px;
					}

				}

				.conter {
					line-height: 30px;
					width: 100%;
					height: 30px;

					.left {
						float: left;

						.h1 {
							font-size: 18px;
							font-weight: 900;
							color: #ffffff;
						}
					}

					.right {
						float: right;

						.rightimg {
							width: 30px;
							height: 30px;
							border-radius: 50px;
						}
					}
				}

				.time {
					color: #e3e3e3;
					font-size: 10px;
					text-align: left;
					margin: 5px 0 0 0;
				}

				.footer {
					font-size: 14px;
					color: #fff;
					width: 100%;
					display: inline-block;
				}

				.button {
					color: #fff;
					background: #fed610b0;
					font-size: 12px;
					padding: 0 15px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border-radius: 30px;
					margin: 10px 0;
				}
			}
			.safearea{
				width: 100%;
				height: 60px;
				float: left;
				font-size: 10px;
				text-align: center;
				line-height: 60px;
				color: #e3e3e3;
			}
		}
	}

	@keyframes grow {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.5);
		}

		100% {
			transform: scale(1);
		}
	}
</style>